<template>
    <div>
        <cus-search>
            <cus-search-item>
                <Form :model="searchForm" :label-width="80">
                    <FormItem label="日期" class="mr_48 mb_20">
                        <cus-datePick :startTime="searchForm.evaluationDate" :showWeekNum="false" :showShortcuts="false"
                            format="yyyy-MM-dd" @onChange="onChangeDate"></cus-datePick>
                    </FormItem>
                    <FormItem label="伙食单位" class="mr_48 mb_20">
                        <Select v-model="searchForm.unitCode" clearable placeholder="请选择伙食单位" style="width: 200px;">
                            <Option :value="item.unitCode" v-for="item in subCanteenList" :key="item.unitCode">{{
                                item.unitName }}
                            </Option>
                        </Select>
                    </FormItem>
                    <cusButton size="small" class="mr_10 mb_20" type="primary" @onClick="pageOption.page = 1; onInit();">查询
                    </cusButton>
                    <cusButton size="small" class="mr_10 mb_20" type="primary" ghost @onClick="onReset">重置</cusButton>
                    <cusButton size="small" class="mr_10 mb_20" type="primary" ghost @onClick="onAdd">添加</cusButton>
                </Form>
            </cus-search-item>
        </cus-search>

        <cus-card class="mt_20">
            <cus-table :border="true" :loading="searchForm.loading" :columns="columns" :data="data"
                :bottomClass="['cus-page']">
                <template slot-scope="{ row, index }" slot="operate">
                    <div class="flex">
                        <Button type="primary" size="small" :style="{ margin: '0 8px' }" @click="onDetail(row)">
                            详情
                        </Button>
                        <Button type="error" size="small" :style="{ padding: '0 8px' }" @click="onDelete(row)">
                            删除
                        </Button>
                    </div>
                </template>
            </cus-table>
            <div style="width: 100%; display: flex; justify-content: flex-end">
                <cus-page class="mt_20" :data="pageOption" @pageChange="onInit"></cus-page>
            </div>
        </cus-card>
        <!-- <cus-footer :showWaterMark="false">
            <div style="width: 100%;display: flex;justify-content: flex-end;padding-right: 20px;">
                <cus-page :data="pageOption" class="mb_10" @pageChange="onInit"></cus-page>
            </div>
        </cus-footer> -->
        <addEvaluateModal ref="addEvaluateModal"></addEvaluateModal>
    </div>
</template>

<script>
import { getSubCanteenList } from "@/api/organ/organization";
import { evaluationPages, evaluationDelete, } from "@/api/organ/business";
import addEvaluateModal from './components/addEvaluateModal.vue'
export default {
    name: 'guaranteeEvaluation',
    components: { addEvaluateModal },
    data() {
        return {
            searchForm: {
                loading: false,
                evaluationDate: new Date().Format('yyyy-MM-dd'),
                unitCode: '',
            },
            data: [],
            subCanteenList: [], //下级单位列表
            columns: [
                {
                    title: '序号',
                    width: 70,
                    // key: 'serialNum',
                    type: 'index',
                    align: 'center'
                },
                {
                    title: '食堂',
                    minWidth: 120,
                    key: 'unitName',
                    align: 'center'
                },
                {
                    title: '评价日期',
                    minWidth: 120,
                    key: 'evaluationDate',
                    align: 'center'
                },
                {
                    title: '得分',
                    minWidth: 120,
                    key: 'scoreTotal',
                    align: 'center'
                },
                {
                    title: '检查人',
                    minWidth: 120,
                    key: 'checkName',
                    align: 'center'
                },
                // {
                //     title: '创建时间',
                //     minWidth: 120,
                //     key: 'createTime',
                //     align: 'center'
                // },
                {
                    title: '操作',
                    minWidth: 120,
                    slot: 'operate',
                    align: 'center'
                },

            ],
            pageOption: {
                page: 1,
                pageSize: 10,
                pageTotal: 0
            }
        }
    },
    mounted() {
        // this.onInit();
        this.getSubCanteenListApi();
    },
    methods: {
        onInit() {
            this.onSearch();
            // this.getErrorTempDailyListApi()
        },
        // 重置查询条件·
        onReset() {
            this.resetFilterForm();
            this.onSearch();
        },
        resetFilterForm() {
            this.searchForm.evaluationDate = new Date().Format('yyyy-MM-dd');
            this.searchForm.unitCode = this.subCanteenList[0].unitCode;
            this.pageOption.page = 1;
        },
        // 选择日期变化
        onChangeDate(date) {
            console.log(date);
            this.searchForm.evaluationDate = date;
            console.log(this.searchForm);
        },
        // 查询晨检自查数据
        onSearch() {
            evaluationPages({
                evaluationDate: this.searchForm.evaluationDate,
                unitCode: this.searchForm.unitCode == 'all' ? '' : this.searchForm.unitCode,
                currentPage: this.pageOption.page,
                pageSize: this.pageOption.pageSize,
            }).then((res) => {
                console.log(res);
                if (res.code === 1) {
                    console.log(res);
                    this.searchForm.loading = false;
                    this.data = res.data.list;
                    this.pageOption.pageTotal = res.data.total;
                }
            }).catch((err) => {
                console.log(err);
                // this.tableLoading = false
            });
        },
        // 添加保障评价台账
        onAdd() {
            this.$refs["addEvaluateModal"].show();
            this.$refs["addEvaluateModal"].subCanteenList = this.subCanteenList;
        },
        // 详情
        onDetail(row) {
            // this.$refs["addEvaluateModal"].addForm.ingredientsId = row.ingredientsId;
            console.log(row.id);
            this.$refs["addEvaluateModal"].addForm.id = row.id;
            // this.subCanteenList.shift();
            this.$refs["addEvaluateModal"].subCanteenList = this.subCanteenList;
            this.$refs["addEvaluateModal"].show();
        },
        // 删除
        onDelete(row) {
            this.$cu.dialog({ content: '数据删除将无法恢复,请谨慎操作' }).then(() => {
                this.$cu.showLoading();
                this.evaluationDeleteApi(row.id)
            });
        },
        evaluationDeleteApi(id) {
            // this.searchForm.loading = true;
            evaluationDelete({
                evaluationId: id,
            }).then((res) => {
                if (res.code === 1) {
                    this.$cu.hideLoading();
                    this.$Message.success('删除成功');
                    if (this.data.length == 1 && this.pageOption.page > 1) {
                        this.pageOption.page = this.pageOption.page - 1;
                    }
                    this.onInit();
                }
            })
        },
        // 获取所有的伙食单位-----------------------接口
        getSubCanteenListApi() {
            this.searchForm.loading = true;
            getSubCanteenList({
                currentPage: 1,
                pageSize: 1000,
            }).then((res) => {
                if (res.code === 1) {
                    this.searchForm.loading = false;
                    this.subCanteenList = res.data.list;
                    this.searchForm.unitCode = res.data.list[0].unitCode;
                    this.onInit();
                }
            });
        },
    }
}
</script>

<style scoped></style>
